<template>
    <div :class="`shop-location ${mode}`">
        <div class="localtion title-color" @click="changeAddress">
            <MiniIcon name="address" theme="#333333" :size="18" />
            <span class="location-value">{{addressTip}}</span>
            <MiniIcon name="right" theme="#333333" :size="16" />
        </div>
        <div v-if="!isMini" class="member-index title-color" @click="gotoMemberPage">
            <MiniIcon name="me" :size="16" theme="#333333" /> 个人中心
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { MiniIcon } from '@components/base';
import { redirectTo } from '@common/utils';
import { platformTruth } from '@common/environment';
import { getMiniEnvTargetCookie } from '@biztools/info';
import ModeMixin from '@common/mixin';
export default {
    name: 'ShopLocation', // 商店位置
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    computed: {
        ...mapState({
            addressTip: state => state.shopAddress.addressTip || '无法获取地址信息',
        }),
        isMini() {
            const { isWechatMini, isAlipayMini, isToutiaoMini } = platformTruth();
            return (isWechatMini || isAlipayMini || isToutiaoMini) && getMiniEnvTargetCookie();
        },
    },
    methods: {
        changeAddress() {
            redirectTo('shop/changeaddress', {
                backUrl: encodeURIComponent('/shop'),
            });
        },
        gotoMemberPage() {
            redirectTo('member/index', {
                backUrl: encodeURIComponent('/shop'),
            });
        },
    },
};
</script>

<style lang="less">
.shop-location {
    .flex();
    align-items: center;
    padding: @shop-gap @shop-gap-md;
    justify-content: space-between;
    &.black {
        .mini-icon {
            color: @black-title-color !important;
        }
    }
    .localtion {
        font-size: @font-size-lg;
        font-weight: @font-weight-bold;
        .flex();
        align-items: center;
        color: @text-color;
        .location-value {
            max-width: 200px;
            .text-overflow();
        }
    }
    .member-index {
        .flex();
        align-items: center;
        font-size: 13px;
        line-height: 13px;
        color: @text-color;
    }
}
</style>
